import React from 'react';
import { Button, Input, Form, PasswordInput, Notify } from 'react-vant'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
const Index = () => {
  const navigate = useNavigate()
  /**
   * The `onFinish` function sends a POST request to the '/api/login' endpoint with the provided value,
   * and handles the response by logging it, checking the code, navigating to '/home' if the code is 200,
   * showing a success notification and storing user information and token in local storage, or showing a
   * danger notification if the code is not 200.
   */
  const onFinish = (value) => {
    axios.post('/api/login', value).then(resp => {
      console.log(resp)
      const { code, message, data } = resp.data;
      if (code === 200) {
        navigate('/home')
        Notify.show({ type: "success", message });
        localStorage.setItem('userInfo', JSON.stringify(data.userInfo))
        localStorage.setItem('token', data.token)
      } else {
        Notify.show({ type: 'danger', message })
      }

    })
  }
  return (
    <div>
      <Form
        onFinish={onFinish}
      >
        <Form.Item label="用户名" name="username">
          <Input placeholder='请输入用户名'></Input>
        </Form.Item>
        <Form.Item label="密码" name="password">
          <Input type="password" placeholder='请输入密码'></Input>
        </Form.Item>
        <Form.Item>
          <Button block type="primary" nativeType="submit">登录</Button>
        </Form.Item>
      </Form>
    </div>
  )
}





export default (Index)


// 帮我写一个求和函数


